<template>
  <el-form ref="formRef" :model="ruleForm" :rules="rules">
    <el-form-item label="" prop="password">
      <el-input
        type="password"
        :size="size"
        style="margin-top: 10px"
        v-model="ruleForm.password"
        placeholder="原密码"
        show-password
      >
        <template #prefix>
          <img
            class="input-icon"
            src="../../assets/image/pwd.png"
            alt=""
            srcset=""
          />
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="" prop="password">
      <el-input
        type="password"
        :size="size"
        style="margin-top: 10px"
        v-model="ruleForm.password"
        placeholder="新密码"
        show-password
      >
        <template #prefix>
          <img
            class="input-icon"
            src="../../assets/image/pwd.png"
            alt=""
            srcset=""
          />
        </template>
      </el-input>
    </el-form-item>

    <el-form-item label="" prop="password">
      <el-input
        type="password"
        :size="size"
        style="margin-top: 10px"
        v-model="ruleForm.password"
        placeholder="确认新密码"
        show-password
      >
        <template #prefix>
          <img
            class="input-icon"
            src="../../assets/image/pwd.png"
            alt=""
            srcset=""
          />
        </template>
      </el-input>
    </el-form-item>

    <el-form-item>
      <span class="desc-text"> 去登录 </span>
    </el-form-item>

    <el-form-item label="">
      <el-button
        class="login-btn"
        :size="size"
        :loading="loading"
        color="#E1463B"
        @click="handleSubmit"
      >
        登录
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, ref } from "vue";
import { useUserStore } from "@/store/modules/user.js";

const userStore = useUserStore();
const formRef = ref(null);
const remember = ref(false);
const size = "large";
const loading = ref(false);

const ruleForm = reactive({
  username: "",
  password: "",
  type: "member_password",
});

const rules = {
  username: {
    required: true,
    message: "请输入用户名",
    trigger: "change",
  },
  password: {
    required: true,
    message: "请输入密码",
    trigger: "change",
  },
};

async function handleSubmit() {
  await formRef.value.validate();
}
</script>

<style scoped lang="scss">
.desc-text {
  color: #606266;
  cursor: pointer;
}
</style>
